<!--
 * @Description: 题库标识码 -- questionbank_Keycode
 * @Author: your name
 * @Date: 2023-12-25
 * @LastEditTime: 2023-12-25
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="questionbank_Keycode heart_w">
      <div class="enterKey_box">
        <h5>Enter Keycode</h5>
        <h2>Test Delivery</h2>
        <p>Please enter your 8 character HTML Keycode.</p>
        <div class="ipt_box">
          <el-input v-model="keyCode"></el-input>
          <el-button type="primary" @click="KeycodeOK">OK</el-button>
        </div>
      </div>
    </div>

    <!-- Dialog -- 协议条款 -->
    <el-dialog
      :visible.sync="dialogVisible"
      width="62%"
      modal-append-to-body
      :show-close="false"
      center
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <div class="innertext">
        <div class="top">
          <p>Aggre to Terms</p>
          <div class="countdown">
            <i class="el-icon-time"></i>
            <span>{{ timing }}</span>
          </div>
        </div>
        <div class="term">
          <div class="texts">
            <p>
              At the test center before beginning the exam you must agree to
              terms in the Candidate Agreement and Standard VII(A) of the CFA
              Institute Standards of Professional Conduct. If you do not accept
              the terms, you will not be permitted to test and must exit the
              exam. Your enrollment and/or registration fees are non-refundable
              and non-transferrable.
            </p>
            <p>
              By checking the box "I accept these terms." and clicking
              "Continue" you affirm that you accept the terms of this agreement
              and want to proceed into the exam. If you do not accept the terms
              of this agreement, you must click the "Exit" button and the exam
              will terminate.
            </p>
          </div>
        </div>
        <div class="aggre">
          <el-checkbox
            v-model="checked"
            @change="warningchecked(checked)"
          ></el-checkbox>
          <span>I agree to the terms</span>
        </div>
        <div class="warning" v-if="warningshow">
          <img src="@/assets/images/cant.png" alt="" />
          <div class="warningText">
            <p>
              You have not accepted the terms. You must accept the terms before
              you can take the test.
            </p>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">Exit</el-button>
        <el-button @click="confirm">Continue</el-button>
      </span>
    </el-dialog>

    <transition name="leftToright">
      <!-- 条款到时间弹框 -->
      <div class="common_dialog notAgree" v-if="unagree_overtime">
        <div class="inner">
          <div class="header">
            <p>Time Expired</p>
          </div>
          <div class="main_text">
            <img src="@/assets/images/times.png" alt="" />
            <p>Your time has expired for confirming the terms of this test.</p>
          </div>
          <div class="btn" @click="unagree_overtime = false">
            <img src="@/assets/images/sure.png" alt="" />
            <p>OK</p>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'QuestionbankKeycode',
  data() {
    return {
      input: 'KGOY2288',
      dialogVisible: false,
      checked: false,
      seconds: 15,
      timing: '00:00:15',
      Init: null,
      keyCode: '',
      unagree_overtime: false, // 条款到时间弹框状态
      warningshow: false
    }
  },
  created() {
    let arr = [],
      ranArr = []
    for (let i = 0; i < 4; i++) {
      let num = Math.floor(Math.random() * 10)
      let ran = String.fromCharCode(65 + Math.ceil(Math.random() * 25))
      arr.push(num)
      ranArr.push(ran)
    }
    this.keyCode = [...arr, ...ranArr].join('')
    console.log(this.keyCode)
    console.log('参数model', this.$route.query.cid)
    localStorage.setItem('model', this.$route.query.cid)
  },
  methods: {
    KeycodeOK() {
      this.start()
      this.dialogVisible = true
    },
    cancel() {
      const h = this.$createElement
      const _that = this
      this.$msgbox({
        title: 'Exit Test',
        showClose: false,
        showCancelButton: true,
        confirmButtonText: 'Exit',
        cancelButtonText: 'Return to Terms',
        message: h('div', null, [
          h('p', { class: 'images_t' }, ''),
          h(
            'p',
            { style: 'color: #333333; text-align: center;' },
            'You have chosen to exit the test. If you exit, you will not be ableto take the test. Do you want to return to the terms or exit'
          )
        ]),

        closeOnPressEscape: false,
        closeOnClickModal: false
        // center: true
      })
        .then((val) => {
          console.log(21312300000000, val)
          clearInterval(_that.Init)
          _that.seconds = 16
          this.dialogVisible = false
        })
        .catch((msg) => {
          console.log(msg)
        })
    },
    start() {
      this.Init = setInterval(this.timers, 1000)
    },
    timers(num) {
      if (this.seconds <= 0) {
        clearInterval(this.Init)
        // this.dialogVisible = false
        this.unagree_overtime = true
        this.seconds = 16
        return
      }
      this.seconds--
      var second = this.seconds % 60
      var minute = parseInt(this.seconds / 60) % 60
      var hour = parseInt(this.seconds / 3600)
      this.timing = `${hour < 10 ? '0' + hour : hour}:
      ${minute < 10 ? '0' + minute : minute}:
      ${second < 10 ? '0' + second : second}`
      console.log('时间', this.seconds)
    },
    warningchecked(val) {
      if (this.warningshow == true) {
        console.log(val)
        this.warningshow = false
      }
    },
    confirm() {
      clearInterval(this.Init)
      if (this.checked) {
        this.warningshow = false
        this.$router.push({ name: 'online_Tutorial' })
      } else {
        this.warningshow = true
      }
    }
  }
}
</script>

<style scoped lang="scss">
.enterKey_box {
  width: 600px;
  height: 430px;
  background: #fff;
  box-shadow: 0px 0px 5px 0px rgb(179, 173, 173);
  border-radius: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  text-align: center;

  .ipt_box {
    display: flex;
    width: 70%;
    margin: 30px auto;
    justify-content: space-between;
    align-items: center;

    .el-button {
      font-size: 18px;
      color: #fff;
      border-width: 2px;
      border-color: #333;
    }
  }

  h5 {
    font-size: 16px;
    line-height: 55px;
    font-weight: 600;
    color: #fff;
    text-indent: 20px;
    background-color: #3d505a;
  }

  h2 {
    display: block;
    background: #2b9ed8;
    border-radius: 4px;
    width: 468px;
    height: 92px;
    line-height: 92px;
    text-align: center;
    font-size: 28px;
    font-weight: 300;
    color: #fff;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    margin-bottom: 0px;
  }

  p {
    font-size: 20px;
    text-align: center;
    margin: 30px 0 40px;
  }
}

.el-dialog__wrapper {
  background-color: #dfe7eb;
}

::v-deep .el-input__inner {
  height: 41px;
  border-radius: 4px;
  border: 1px solid #b3b3b3;
  width: 100%;
  letter-spacing: 0.25em;
  text-align: center;
  clear: both;
  color: #333;
  letter-spacing: 0.25em;
  font-size: 28px;
}

.el-input {
  box-shadow: 0 0 5px 2px #2b9ed8;
  border-radius: 4px;
  width: 292px;
  padding: 2px;
}

::v-deep .el-dialog__header {
  padding: 0;
}
::v-deep .el-dialog__body {
  padding: 0 !important;
}

::v-deep .el-dialog {
  box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
}

.top {
  width: 100%;
  height: 50px;
  background: #4d4c4d;
  border-radius: 5px 5px 0 0;
  align-items: center;
  display: flex;
  justify-content: space-between;

  p {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    text-align: left;
    line-height: 50px;
    margin: 0 0 0 10px;
  }
}

.countdown {
  margin-right: 20px;
  i {
    font-size: 24px;
    color: #ffffff;
    margin-left: 5px;
    font-weight: bold;
  }

  span {
    font-size: 20px;
    color: #ffffff;
    margin-left: 5px;
  }
}

.term {
  width: 80%;
  height: 300px;
  border: 3px solid orange;
  margin: 20px auto 0;
  border-radius: 10px;

  .texts {
    width: 95%;
    height: 260px;
    margin: 20px auto 0;
    font-size: 12px;
    color: #333333;
    letter-spacing: 1px;
    line-height: 20px;

    p {
      font-size: 14px;
      margin-top: 30px;
      line-height: 24px;
      font-family: 'Microsoft Yahei';
    }
  }
}

.aggre {
  margin: 30px auto 0;
  text-align: center;
  span {
    font-size: 17px;
    color: #333333;
    margin-left: 10px;
  }
}

::v-deep .el-dialog__footer {
  margin-top: 25px;
}

.warning {
  margin: 20px auto 0;
  font-size: 16px;
  width: 434px;
  min-height: 80px;
  background: #f2d9d8;
  border: 1px solid #c0433a;
  display: flex;
  justify-content: space-between;
  align-items: center;

  img {
    width: 30px;
    height: 30px;
    margin-left: 10px;
  }

  .warningText {
    width: 371px;
    padding: 8px;
    font-size: 16px;
    color: #333333;
  }
}

.dialog-footer {
  .el-button {
    background-color: #8cc63f;
    font-size: 18px;
    border-color: transparent;
    color: #ffffff;
    font-family: 'Microsoft Yahei';
    margin-bottom: 30px;
  }

  .el-button:last-child {
    margin-left: 45px;
  }
}

.el-message-box__message {
  div {
    text-align: center;
  }

  p {
    width: 80%;
    margin: 0px auto;
    color: #333333;
    font-family: 'Microsoft Yahei';
    text-align: center;
    line-height: 30px;
    font-size: 18px;
  }
}

::v-deep .el-message-box__btns {
  margin: 40px 20px 0 0;
  .el-button {
    font-size: 16px;
    color: #ffffff;
    border: 0;
    outline: none;
    background: #8cc63f;
    border-radius: 4px;
  }
}

// 条款到时间弹框
.common_dialog.notAgree {
  z-index: 2050;
  .inner {
    height: 280px;
    width: 500px;
    background: #ffffff;
    box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 4px;
  }

  .header {
    width: 100%;
    height: 50px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background: #4d4c4d;

    p {
      font-size: 16px;
      font-weight: bold;
      color: #ffffff;
      margin-left: 10px;
      line-height: 50px;
    }
  }
  .main_text {
    font-weight: normal;
    width: 80%;
    margin: 20px auto;
    text-align: center;
    line-height: 30px;
    font-size: 18px;
    color: #333333;

    img {
      width: 56px;
      height: 56px;
      margin-bottom: 12px;
    }
  }

  .btn {
    width: 80px;
    height: 40px;
    margin: 0 auto;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    outline: none;
    border: 0;
    background: #8cc63f;
    cursor: pointer;
    user-select: none;

    img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }
  }
}
</style>
